<template>
	<div class="t-main">
		<el-scrollbar max-height="60vh">
			<ul class="nav-list">
				<li
					class="nav-item"
					:class="{ active: item.value === checkType }"
					v-for="item in typeList"
					:key="item.value"
					@click="handleCheckType(item.value)"
				>
					<el-badge :value="getTypeNumber(item.value)" class="item" style="width: 90%" type="success" :show-zero="false">
						<p>{{ item.label }}</p>
					</el-badge>
				</li>
			</ul>
		</el-scrollbar>
		<section class="t-content mt10">
			<div class="search">
				<el-input v-model="searchKey" clearable placeholder="请输入内容"></el-input>
				<el-button type="primary" @click="handleSearch">
					<el-icon>
						<icon-search theme="outline" size="24" />
					</el-icon>
					搜索
				</el-button>
			</div>

			<el-scrollbar max-height="60vh" v-if="dataList.length > 0">
				<ul class="nav-card-list">
					<li
						class="nav-card-item"
						v-for="item in dataList"
						:key="item.id"
						:class="{ 'nav-item-active': isChecked(item) }"
						@click="handleCheck(item)"
					>
						<FileList
							fit="fill"
							:src="item.pic"
							style="width: 100%; height: 115px; border-top-left-radius: 10px; border-top-right-radius: 10px"
							:single="true"
						></FileList>
						<div class="item-content flex1">
							<div class="text-bold flex align-center">
								<el-icon class="mr8">
									<icon-check-one v-if="isChecked(item)" theme="outline" size="26" fill="#0052D9" />
									<icon-round v-else theme="outline" size="26" />
								</el-icon>
								<p v-if="item.packageName">
									{{ item.packageName }}<span class="f14 text-gray">({{ item.dishName || item.dishsName }})</span>
								</p>
								<p v-else>{{ item.dishName || item.dishsName }}</p>
							</div>

							<div class="f-between">
								<p class="text-value">
									￥<span>{{ item.price }}</span
									><span class="text-gray f14">/{{ item.quantifier }}</span>
								</p>
								<!-- <el-input-number size="small" style="width: 80px" :min="0" :max="1000" v-model="item.count" @change="handleCheck(item)" /> -->
							</div>
						</div>
					</li>
				</ul>
			</el-scrollbar>
			<el-empty v-else :image-size="200" />
		</section>
	</div>
</template>

<script setup lang="ts">
import FileList from '@/views/aplid/DetailPage/ContentListItem/FileList/PreviewImg/index.vue'
import apiMod from '@/apiMod/index'

const props = defineProps<{
	dish_type_data: any
	modelValue?: any
}>()

const emit = defineEmits(['update:modelValue', 'update:itemType'])

const checkedList = ref([])
const searchKey = ref('')
const dataList = ref([])
const checkType = ref('-99')
const typeList = computed(() => {
	return [
		{
			label: '套餐',
			value: '-99',
		},
		...props.dish_type_data,
	]
})

const isChecked = (item) => {
	return checkedList.value.find((i) => i.itemId == item.id)
}
const getTypeNumber = (type) => {
	const num = checkedList.value.filter((item) => item.dishType == type)
	return num.length
}
const cleanChecked = () => {
	checkedList.value = []
	searchKey.value = ''
}
const handleCheck = (item) => {
	const indexKey = checkedList.value.findIndex((i) => i.itemId === item.id)
	if (indexKey == -1) {
		checkedList.value.push({
			itemId: item.id,
			itemType: item.itemType,
			dishType: item.dishType,
		})
	} else {
		checkedList.value.splice(indexKey, 1)
	}
	emit('update:itemType', checkType.value == '-99' ? '1' : '0')
	emit('update:modelValue', checkedList.value)
}

const handleCheckType = (value) => {
	checkType.value = value
	searchKey.value = ''
	handleSearch()
}

const handleSearch = () => {
	if (checkType.value == '-99') {
		getPackage()
	} else {
		getDish()
	}
}
const getDish = () => {
	apiMod
		.view_omDish_page({
			state: 0,
			dishType: checkType.value,
			dishName: searchKey.value,
			pageParaPO: {
				size: 500,
				current: 1,
			},
		})
		.then((res) => {
			const data = res.data
			dataList.value = data.records?.map((item) => {
				item.itemType = 0
				return item
			})
		})
}

const getPackage = () => {
	apiMod
		.view_omPackage_page({
			state: 0,
			dishsName: searchKey.value,
			pageParaPO: { size: 500, current: 1 },
		})
		.then((res) => {
			const data = res.data
			dataList.value = data.records?.map((item) => {
				item.itemType = 1
        item.dishType = '-99'
				return item
			})
		})
}

onMounted(() => {
	checkedList.value = props.modelValue || []
	if (!props.dish_type_data) return
	handleSearch()
})

defineExpose({
  cleanChecked
})
</script>

<style scoped lang="scss">
.t-main {
	display: flex;
	padding: 10px;
	gap: 20px;
	user-select: none;
	.text-value {
		font-family: 'Microsoft YaHei Bold';
		font-weight: 700;
		font-size: 20px;
		text-align: left;
		color: #0052d9;
	}
	.nav-list {
		display: flex;
		flex-flow: column;
		gap: 8px;
		background-color: #fff;
		padding: 10px;
		border-right: 1px solid #eee;
		.nav-item {
			background-color: #f5f5f569;
			line-height: 32px;
			border-radius: 5px;
			padding-left: 30px;
			&:hover {
				cursor: pointer;
			}
		}
		.active {
			color: #0075fc;
			font-weight: bold;

			width: 223px;
			background: rgba(0, 82, 217, 0.1);

			font-family: 'Microsoft YaHei';
			font-weight: 400;
			font-size: 14px;
			color: #0052d9;
		}
	}
	.nav-item-active {
		border: 1px solid #0075fc !important;
	}
	.nav-card-list {
		display: flex;
		flex-flow: row wrap;
		gap: 8px;
		background-color: #fff;
		padding: 10px;
		margin-top: 10px;
		border-radius: 10px;
		.nav-card-item {
			width: calc(100% / 3 - 10px);
			line-height: 40px;
			border-radius: 10px;
			border: 1px solid #0052d9;
			border-top: none;
			position: relative;
			&:hover {
				cursor: pointer;
			}
			.item-content {
				border-top: none;
				padding: 10px;
				display: flex;
				flex-flow: column;
				justify-content: space-around;
			}
		}
	}

	.t-content {
		flex: 1;
		.search {
			display: flex;
			align-items: center;
			gap: 10px;
		}
	}
}
</style>
